<template>
  <!-- <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div>
        <video controls v-for="video in videos" :key="video.id" :src="video.url"></video>
      </div>
    </van-list> -->
  <!-- <Myfooter /> -->
  <!-- </div> -->

  <div class="box">
    
    
    <div class="clickLike">
      <van-icon name="like"
                size="50"
                @click="likeClick"
                :color="num?'#F1050A':''" />
      <transition @before-enter="beforeEnter"
                  @enter="enter"
                  @after-enter="afterEnter">
        <span class="addOne"
              v-if="isLike">+1</span>
      </transition>
      {{num}}
    </div>

    <!-- <view class="lock-main">
		<div>
			<div class="heart" :style='{"background-position":bakPo}' :class="{'heartAnimation':heartAnimation}" @click="heartLiske"></div>
			<div class="likeCount">{{likeCount}}</div>
		</div>
	</view> -->

  
    <van-cell 
    class="share"
    title="点击分享" 
    @click="showShare = true" />
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />

    <van-swipe
      ref="vswipe"
      class="my-swipe"
      :show-indicators="false"
      @change="onChange"
      vertical
    >
      <van-swipe-item v-for="video in videos" :key="video.id">
        <video autoplay muted controls :src="video.url"></video>
      </van-swipe-item>
    </van-swipe>
    
    
  </div>
</template>

<script>
// import {getVideos} from '@/request';
// import Vue from 'vue';
// import { List } from 'vant';
// import Myfooter from '@/components/Myfooter'
// Vue.use(List);
import { getVideos } from "@/request";
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import { Cell, CellGroup } from 'vant';
import { ShareSheet } from 'vant';
import { Icon } from 'vant';

Vue.use(Icon);
Vue.use(Cell);
Vue.use(CellGroup);

Vue.use(ShareSheet);
Vue.use(Swipe);
Vue.use(SwipeItem);


export default {
  // components: {
  //     Myfooter: Myfooter
  //     },
  data() {
    return {
      // loading: false,
      // finished: false,
      videos: [],
      current: 0,
      num: '',//点赞数
      isLike: false,
      // page: 1


      // heartAnimation: false,
			// bakPo: 'left',
      // likeCount: 14
      
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],

    };
  },
  created() {
    this.request();
  },
  updated() {
    this.updateing();
  },
  methods: {
    
    // heartLiske() {
		// 		this.heartAnimation ? this.likeCount-- : this.likeCount++
		// 		this.bakPo = ""
		// 		this.bakPo = this.heartAnimation ? "left" : "right"
		// 		this.heartAnimation = this.heartAnimation ? false : true
		// 		console.log(this.likeCount)
    // },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },


    async request() {
      // var videos = await getVideos()
      // videos = videos.slice((this.page - 1) * 5, this.page * 5)
      // if(videos.length < 5) {
      //     this.finished = true
      // }
      // else {
      //     this.page++
      // }
      // this.loading = false
      // this.videos = this.videos.concat(videos)
      this.videos = await getVideos();
    },
    onChange(index) {
      this.current = index;
      this.updateing();
    },
    updateing() {
      var vs = document.querySelectorAll("video");
      // 获取到当前正在轮播的video
      var video = vs[this.current];
      // 绑定事件 - 当开始播放的时候，提高音量
      video.onplay = () => {
        // video.muted = false
        // if(video.currentTime >= 5) {
        // video.muted = false
        // }
        video.volume = 1;
      };
      // 绑定事件 - 当播放完成后，切换到下一个轮播
      video.onended = () => {
        // 切换
        this.$refs.vswipe.next();
      };
    },
    beforeEnter(el) {
      //动画开始进入前
      el.style.transform = 'translate(0,0)'
    },
    enter(el, done) {
      //动画执行时
      el.offsetWidth
      el.style.transform = 'translate(10px,-22px)'
      el.style.transition = 'all 0.6s ease'
      done()
    },
    afterEnter(el) {
      //动画结束时
      this.isLike = !this.isLike
    },
    likeClick() {
     this.isLike = true
     this.num++
    },
    // onLoad() {
    //     this.request()
    // }
  },
};
</script>

<style scoped>
/* .box{
    padding: 0 20px 0 10px; 
}
video{
    height: 200px; 
    width: 100%; 
} */
.clickLike {
  position:absolute;
  top: 60%;
  left: 76%;
  z-index: 99;
}

.addOne {
  position: absolute;
  font-size: 40px;
  font-weight: bold;
  color: #F1050A;
}
.box {
  padding: 10px 0px ;
}
.share{
  position:absolute;
  top: 85%;
  z-index: 99;
  padding-left: 71%;
  font-size: 20px;
  font-family: '华文彩云','Times New Roman', Times, serif;
  color:red;
  
}
.my-swipe .van-swipe-item {
  width: 100%;
  height: 85vh;
}
video {
  height: 85vh;
  width: 100%;
}



.lock-main {
		color: #fff;
	}

	.heart {
		background: url('http://product.armark.com.cn/echolac/res/image/Fu3O0aVNZihP-qi7NCH0epcFnju_.png');
		background-repeat: no-repeat;
		height: 100px;
		width: 100px;
		cursor: pointer;
		background-size: 2900%;
	}

	@-webkit-keyframes heartBlast {
		0% {
			background-position: left;
		}

		100% {
			background-position: right;
		}
	}

	@keyframes heartBlast {
		0% {
			background-position: left;
		}

		100% {
			background-position: right;
		}
	}
  
</style>
